<template>
    <base-page class='base_params_page_container' ref='paramsPage'
               :options='pageOptions' @event='handlePageEvent'>
        <template v-slot:right_search='{searchForm}'>
            <div class='search_item'>
                <el-select v-model='searchForm.state' placeholder='请选择'
                           @change='refresh(true)' class='w100'
                           style='margin-right: 5px;' clearable>
                    <el-option label='全部状态' value='' />
                    <el-option label='启用' :value='1' />
                    <el-option label='禁用' :value='0' />
                </el-select>
            </div>
        </template>
    </base-page>
</template>

<script>
import ParamsForm from './ParamsForm.vue'
import { deleteConfirmBySids } from '@common/utils/message'

export default {
    name: 'ParamsPage',
    props: {
        key1: String,
        key2: String,
        key3: String,
        permission: {
            type: Object,
            default: null,
        },
        valueLabel: {
            type: String,
            default: '参数值',
        },
        displayLabel: {
            type: String,
            default: '参数名',
        },
        title: {
            type: String,
            default: '参数',
        },
    },
    components: {
        BasePage: () => import('./BasePage.vue'),
    },
    data() {
        const _this = this
        return {
            pageOptions: {
                url: _this.$api.API_FindCommonParameterValues,
                initSearchForm() {
                    const searchForm = {
                        state: '',
                    }
                    if (_this.$utils.isNotEmpty(_this.key1)) {
                        searchForm.key1 = _this.key1
                    }
                    if (_this.$utils.isNotEmpty(_this.key2)) {
                        searchForm.key2 = _this.key2
                    }
                    if (_this.$utils.isNotEmpty(_this.key3)) {
                        searchForm.key3 = _this.key3
                    }
                    return searchForm
                },
                header: {
                    toolbar_buttons: [
                        {
                            id: 'refresh',
                            icon: 'fa fa-refresh',
                            show: true,
                            method: () => {
                                _this.refresh()
                            },
                        },
                        {
                            id: 'add',
                            type: 'primary',
                            icon: 'fa fa-plus',
                            show: true,
                            permission: _this.permission ? _this.permission.save : '',
                            method: () => {
                                _this.openDialog('add', null)
                            },
                        },
                        {
                            id: 'edit',
                            type: 'success',
                            icon: 'fa fa-pencil',
                            show: true,
                            permission: _this.permission ? _this.permission.save : '',
                            method: () => {
                                _this.openDialog('edit', null)
                            },
                        },
                        {
                            id: 'del',
                            type: 'danger',
                            icon: 'fa fa-trash-o',
                            show: true,
                            permission: _this.permission ? _this.permission.delete : '',
                            method: () => {
                                _this.confirmDel()
                            },
                        },
                    ],
                    toolbar_filter: [
                        { type: 'text', field: 'value', label: '助记码' },
                        { type: 'text', field: 'display_text', label: '名称' },
                    ],
                },
                table: {
                    ref: 'CommonParamsTable',
                    container: '.base_params_page_container',
                    multiSelect: true,
                    columnField: {
                        display_text: _this.displayLabel || '参数名称',
                        value: _this.valueLabel || '参数值',
                        state: '状态',
                        sn: '排序',
                    },
                    columnWidth: {
                        state: 120,
                        sn: 120,
                    },
                    columnCellRender: {
                        state: {
                            name: 'CustomSwitch',
                            props: {
                                activeValue: 1,
                                inactiveValue: 0,
                            },
                            events: {
                                change({row}, val) {
                                    _this.saveState(row, val);
                                },
                            },
                        },
                    },
                    operates: {
                        fixed: 'right',
                        list: [
                            {
                                id: 'edit',
                                icon: 'fa fa-pencil',
                                type: 'success',
                                show: true,
                                tooltip: {
                                    content: '编辑',
                                },
                                permission: _this.permission ? _this.permission.save : '',
                                method: (key, row, index) => {
                                    _this.openDialog('edit', row)
                                },
                            },
                            {
                                id: 'info',
                                icon: 'fa fa-trash-o',
                                type: 'danger',
                                tooltip: {
                                    content: '删除',
                                },
                                permission: _this.permission ? _this.permission.delete : '',
                                show: true,
                                method: (key, row, index) => {
                                    _this.confirmDel(row)
                                },
                            },
                        ],
                    },
                    pagination: {
                        pageIndex: 1,
                        pageSize: window.configs.pageSize,
                    },
                },
            },
            selectionList: [],
        }
    },
    methods: {
        refresh(query) {
            this.$refs.paramsPage && this.$refs.paramsPage.getList(query)
        },
        handlePageEvent(event) {
            if (event.type === 'selectionChange') {
                this.selectionList = event.value
            }
        },
        openDialog(type, row) {
            const _this = this
            if (this.$refs.paramsPage) {
                this.$refs.paramsPage.openDialog({
                    type, row, title: (_this.title || '参数'),
                    component: {
                        value: ParamsForm,
                        props: {
                            params: _this.$props,
                            type,
                        },
                    },
                })
            }
        },
        confirmDel(row) {
            let _this = this
            deleteConfirmBySids({
                url: _this.$api.API_DeleteCommonParameterValues,
                list: _this.selectionList,
                row,
                multi: true,
            }).then(() => {
                _this.refresh(true)
            }).catch(() => {
            })
        },
        saveState(row, value) {
            const _this = this;
            _this.fetchDataNoCatch(_this.$api.API_SaveCommonParameterValue, {
                sid: row.sid,
                state: value,
            }).then(() => {
                _this.$message.success('保存成功！')
            });
        },
    },
}
</script>

<style lang='less' rel='stylesheet/less' scoped>
.base_params_page_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
